<template>
  <!-- 服务弹出框 -->
  <view class="service-panel">
    <view class="title">
      <view class=""></view>
      <view class="name">服务说明</view>
      <view class="close" @tap="onTab">X</view>
    </view>
    <!-- 内容 -->
    <view class="content">
      <view class="item">
        <view class="dt"> 无忧退货 </view>
        <view class="dd">
          自收到商品之日起30天内，可在线申请无忧退货服务（食品等特殊商品除外）
        </view>
      </view>

      <view class="item">
        <view class="dt"> 快速退款 </view>
        <view class="dd">
          收到退货包裹并确认无误后，将在48小时内办理退款，
          退款将原路返回，不同银行处理时间不同，预计1-5个工作日到账
        </view>
      </view>

      <view class="item">
        <view class="dt"> 满88元免邮费 </view>
        <view class="dd">
          单笔订单金额(不含运费)满88元可免邮费，不满88元， 单笔订单收取10元邮费
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  (event: 'close'): void
}>()

const onTab = () => {
  emit('close')
}
</script>

<style scoped lang="scss">
.service-panel {
  padding: 20rpx;

  .title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #ccc;

    .name {
      padding: 20rpx;
      font-size: 35rpx;
      line-height: 1em;
    }

    .close {
      font-size: 35rpx;
      padding-right: 10rpx;
    }
  }

  .content {
    margin-top: 20rpx;
    padding-bottom: 50rpx;

    .item {
      .dt {
        font-size: 32rpx;
        line-height: 2em;
      }

      .dd {
        color: #999999;
        font-size: 30rpx;
        line-height: 1.5em;
      }
    }
  }
}
</style>
